<template>
    <m-navbar :custom="true">
        <template #title>
            <text class="fz-16 text-default">{{ pageName }}</text>
        </template>
    </m-navbar>
    <view class="px-10">
        <template v-if="tabData.length">
            <u-tabs
                :activeStyle="{ color: '#70B9BE' }"
                :list="tabData"
                :scrollable="false"
                lineColor="#70B9BE"
                @click="click"
            />
        </template>
        <view :class="['box-border px-10 flex-justifyBetween-itemsCenter-box flex-wrap w-full', isSafeArea ? 'pb-safe' : 'pb-16']">
            <template v-if="listData.length">
                <view
                    class="flex-col-between-box overflow-hidden box-border flex-shark-1 flex-wrap list-box mt-20 rounded-14 common-shadow bg-white p-8"
                    v-for="item in listData"
                    :key="item"
                >
                    <u--image
                        :src="item.imgUrl"
                        width="100%"
                        height="350rpx"
                        radius="10"
                        mode="aspectFill"
                        bgColor="#F2F2F2"
                        @click="previewImg(item.imgUrl)"
                    />
                    <view class="flex-justifyBetween-itemsEnd-box flex-1">
                        <text class="text-default fz-14">{{ item.name }}</text>
                    </view>
                </view>
            </template>
            <template v-else>
                <view class="w-full h-page-empty flex-justifyCenter-itemsCenter-box">
                    <u-empty width="200" text="暂时没有菜品哦~" icon="http://cdn.uviewui.com/uview/empty/list.png"/>
                </view>
            </template>
        </view>
        <!-- 图片预览弹窗 -->
        <u-overlay :show="isShowPreview" @click="isShowPreview = false" :opacity="0.9">
            <view class="warp">
                <image class="w-full" :src="previewImgUrl" mode="widthFix"/>
            </view>
        </u-overlay>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import { tabTypeData, listTypeData } from '@/pages/menuList/pageData'

const isSafeArea = uni.getStorageSync('isSafeArea')

// 页面标题
enum MenuTitle {
    '荤菜' = 1,
    '素菜' = 2,
    '凉拌菜' = 3,
    '汤菜' = 4,
    '大菜' = 5,
    '其他' = 6
}

// tab 栏内容
const tabData = computed(() => tabTypeData[dishType.value - 1] || [])

// tab 选择的值
const tabIndex = ref(0)

// 列表数据
const listData = computed(() => {
	return listTypeData[dishType.value][tabIndex.value] || []
})

// 页面名称
const pageName = computed(() => MenuTitle[dishType.value])

// 菜单类型
const dishType = ref(1)

onLoad(options => {
	dishType.value = Number(options.dishType)
})

// 点击切换
const click = item => {
	tabIndex.value = item.index
}

// 图片预览弹窗
const isShowPreview = ref(false)

// 预览图片
const previewImgUrl = ref('')

// 打开预览
const previewImg = (imgUrl: string) => {
	isShowPreview.value = true
	previewImgUrl.value = imgUrl
}
</script>

<style lang="scss" scoped>
.list-box{
    width: calc(50% - 20rpx);
    height: 430rpx;
}

.warp {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
</style>
